// this问题解决方案1（常规写法，推荐大家应用）
// 1.0 导入React
import React from 'react'

// 2.0 使用class创建Hello组件 (类组件)
class Hello2 extends React.Component {  
    constructor() {
        super();
        this.name ='59期的小伙伴'
    }
    // 在react中事件函数的定义，一定是用箭头函数，如果使用普通方式的话就会出现this问题
    clickHander =  () => { 
        console.log('触发了',this.name);
    }
 
    //4.0 JSX结构是写在类组件中的render方法中
    render() {     
        
        return (<div>
            这是类组件的内容hell2

            <button onClick={ this.clickHander }>请点击我</button>
        </div>)
    }
}

// 3.0 导出组件
export default Hello2;



// this问题解决方案2：
// import React from 'react'

// // 2.0 使用class创建Hello组件 (类组件)
// class Hello2 extends React.Component {  
//     constructor() {
//         super();
//         this.name ='59期的小伙伴'
//     }
//     // 在react中事件函数的定义，一定是用箭头函数，如果使用普通方式的话就会出现this问题
//     // clickHander =  () => { 
//     //     console.log('触发了',this.name);
//     // }

//     clickHander =  function() { 
//         console.log('触发了',this.name);
//     }

//     //4.0 JSX结构是写在类组件中的render方法中
//     render() {     
        
//         return (<div>
//             这是类组件的内容hell2

//             <button onClick={() => { this.clickHander();  } }>请点击我</button>
//         </div>)
//     }
// }

// // 3.0 导出组件
// export default Hello2;